<template>
    <div v-loading="loading">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px" label-position="top"
                 class="public-form">
            <el-form-item label="旧密码" prop="oldPwd">
                <el-input v-model="form.oldPwd" type='password'  placeholder="旧密码"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
                <el-input v-model="form.newPwd" type='password'  placeholder="新密码"></el-input>
            </el-form-item>
            <el-form-item label="再次输入密码" prop="againPwd">
                <el-input v-model="form.againPwd" type='password'  placeholder="再次输入密码"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onSubmit('form')">确定提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import api from '@/api'
    // require styles
    export default {
        name: 'editPassword',
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if (this.form.newPwd !== value) {
                    callback(new Error('两次输入密码不一致'));
                } else {
                    callback()
                }
            };
            return {
                loading: false,
                form: {
                    oldPwd:'',
                    newPwd:'',
                    againPwd:''
                },
                rules: {
                    oldPwd: [{required: true, trigger: 'blur', message: '请输入旧密码'}],
                    newPwd: [{required: true, trigger: 'blur', message: '请输入新密码'}],
                    againPwd: [{required: true, trigger: 'blur',validator: validatePass, message: '请输入正确的确认密码'}],
                },
            }
        },
        created() {
           
        },
        methods: {
            onSubmit(form) {
                let _this = this;
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        this.loading = true
                        setTimeout(() => {
                            this.loading = false
                        }, 5000);
                        api.editPassword(this.form).then(res => {
                            if (res.code == 200) {
                                this.$message({
                                  message: '密码修改完成',
                                  type: 'success'
                                });
                                 this.$store.dispatch('LogOut').then(() => {
                                     location.reload() // 为了重新实例化vue-router对象 避免bug
                                    })
                            }
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                })
            }
        }
    }
</script>


